<template>
<div style="background-color: #edf2fc;min-height: 820px;padding-top: 10px">
  <el-card style="width: 1200px;margin: 5px auto 5px">
    <p style="font-size: 25px;font-weight: bold;position: relative"><i class="el-icon-arrow-left" @click="rollBack"></i> 我的收货地址<el-button style="background-color:orangered;font-size: 18px;color: white;position: absolute;right: 40px" round @click="addNewAddress">+ 添加收货地址</el-button></p>
  </el-card>
  <el-card v-for="consignee in consigneeArr" style="width: 1200px;margin: 5px auto;position: relative">
    <div @click="selected(consignee.id)">
    <p style="font-size: 20px"><span style="margin:0 200px 0 20px">姓名: {{consignee.name}}</span><span style="margin-right: 200px">联系方式: {{ consignee.phone }}</span><span>现居地址: {{consignee.nativePlace}}</span></p>
    <p style="font-size: 20px"><span style="margin:0 30px 0 20px">详细地址: {{consignee.detailAddress}}</span><el-button type="info" size="small" disabled v-show="consignee.isDefault==1">默认地址</el-button></p>
    </div>
    <i class="el-icon-edit" style="font-size: 25px;position: absolute;right: 70px;top: 70px" @click="edit(consignee.id)"></i>
    <i class="el-icon-delete" style="font-size: 25px;position: absolute;right: 30px;top: 70px" @click="del(consignee.id)"></i>
  </el-card>
</div>
</template>

<script>
import axios from "axios";

export default {
data(){
  return{
    consigneeArr:[{id:0,nativePlace:"山西省太原市小店区",detailAddress:"高新开发区高新国际A座24层",name:"张三",phone:"15035758973",isShow:1},
      {id:1,nativePlace:"山西省太原市小店区",detailAddress:"高新开发区高新国际A座24层",name:"张三",phone:"15035758973",isShow:0},]
  }
},
  created() {
    let consigneeUrl = 'http://localhost:8080/consignee/list'
    axios.get(consigneeUrl).then((response) => {
      let json = response.data
      this.consigneeArr = json.data
      console.log(this.consigneeArr[0].name)
      console.log(this.consigneeArr[0].isDefault==1)
    })
  },
  methods:{
  rollBack(){
    history.back()
  },
    addNewAddress(){
    location.href="/address/add"
    },
    selected(id){
      let consigneeUrl = 'http://localhost:8080/consignee/display/'+id
      axios.get(consigneeUrl).then((response) => {
        location.href='/clear'
      })
    },
    edit(id){
      location.href="/address/change?id="+id
      },
    del(id){

      let consigneeUrl = 'http://localhost:8080/consignee/delete/'+id
      axios.get(consigneeUrl).then((response) => {
      console.log("删除成功")
        location.reload()
      })
    }
  }
}
</script>

